<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<link href="index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="root">

</div>
<script type="text/babel">
class App extends React.Component {
  constructor() {
      super();
 
      this.state = {
        name: "商品详情",
        src:["timg.jpg","timg2.jpg","timg3.jpg"],
        goods:{
            goods_express:"快递送货",
            goods_name:"女士ins风连衣裙",
            goods_classify:"lady dress",
            false_price:299.00,
            true_price:39,
            price_img:"icon_coin.png",
            specs_color:"红色",
            stuff:"棉麻",
            height:16,
            txt:"高品质进口丝绒织带帽绳绒质绵密，柔软细腻，衣身采用宽松版型，穿着十分舒适",
            detailsImg:[
                "1.jpg",
                "2.jpg",
                "3.jpg"
            ]
        }
     
      }
    }
  render() {
    return (
      <div>
        <Header name={this.state.name} />
        <Banner src={this.state.src} />
        <Store goods={this.state.goods}/>
      </div>
    );
  }
}
//头部
class Header extends React.Component{
    render(){
        return(
            <div className="header">
                <span className="headertxt">{this.props.name}</span> 
            </div>
        )
    }
}
//banner图片
class Banner extends React.Component{
    render(){
        return(
            // <div className="banner">
            //     <img src={this.props.src}/>
            // </div>
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide"><img src={this.props.src[0]}/></div>
                    <div className="swiper-slide"><img src={this.props.src[1]}/></div>
                    <div className="swiper-slide"><img src={this.props.src[2]}/></div>
                </div>
        </div>
        )
    }
}
//商品
class Store extends React.Component{
    render(){
        return(
            <div className="store">
                <StoreName goods={this.props.goods}/>
                <Price goods={this.props.goods}/>
                <Specs goods={this.props.goods}/>
                <Parameter goods={this.props.goods}/>
                <Details goods={this.props.goods}/>
            </div>
        )
    }
}
//商品名称
class StoreName extends React.Component{
    render(){
        return(
            <div className="goods_header">
                <div className="goods_msg">
                    <span className="e_xpress">{this.props.goods.goods_express}</span>
                    <span className="good_name">{this.props.goods.goods_name}</span>
                </div>
                <div className="goods_classify">{this.props.goods.goods_classify}</div>
            </div>
        )
    }
}
//商品价格
class Price extends React.Component{
    render(){
        return(
            <div className="price">
                    <span className="false_price">${this.props.goods.false_price}</span>
                    <div className="true_box">
                        <span className="price_img">
                            <img src={this.props.goods.price_img}/>
                        </span>
                        <span className="true_price">{this.props.goods.true_price}</span>
                    </div>
            </div>
        )
    }
}
//商品规格
class Specs extends React.Component{
    render(){
        return(
            <div className="specs">
                <div className="goods_line specs_header">
                    <div></div>
                    <span className="goods_title specs_title">商品规格</span>
                    <div></div>
                </div>
                <div className="specs_content">
                    <div className="goods_item specs_color">
                        <span>颜色</span>
                        <span>{this.props.goods.specs_color}</span>
                    </div>
                </div>
            </div>
        )
    }
}

//商品参数
class Parameter extends React.Component{
    render(){
        return(
            <div className="par">
                <div className="goods_line par_header">
                    <div></div>
                    <span className="goods_title par_title">商品参数</span>
                    <div></div>
                </div>
                <div className="par_content">
                    <div className="goods_item par_stuff">
                        <span>材料</span>
                        <span>{this.props.goods.stuff}</span>
                    </div>
                    <div className="goods_item par_height">
                        <span>码数</span>
                        <span>{this.props.goods.height}</span>
                    </div>
                </div>
            </div>
        )
    }
}
//详情
class Details extends React.Component{
    render(){
        return(
            <div className="details">
                <div className="goods_line details_header">
                    <div></div>
                    <span className="goods_title details_title">详情</span>
                    <div></div>
                </div>
                <div className="details_box">
                        <p>{this.props.goods.txt}</p>
                        <img src={this.props.goods.detailsImg[0]}/>
                        <img src={this.props.goods.detailsImg[1]}/>
                        <img src={this.props.goods.detailsImg[2]}/>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
	document.getElementById('root')
);
new Swiper ('.swiper-container', {
    loop: true,  //循环
    autoplay: {   //滑动后继续播放（不写官方默认暂停）
        disableOnInteraction: false,
    },
    pagination: {  //分页器
        el: '.swiper-pagination'
    }
})
</script>

</body>
</html>